<template>
  <div>
    <a-row>
      <a-col :span="8" id="main1-col">
        <div id="main1" style="width: 90%;height:300px;"></div>
      </a-col>
      <a-col :span="8" id="pie2-col">
        <div id="pie2" style="width: 90%;height:300px;"></div>
      </a-col>
      <a-col :span="8" id="pie3-col">
        <div id="pie3" style="width: 90%;height:300px;"></div>
      </a-col>
    </a-row>
    <br>
    <a-row>
      <a-col :span="12" id="bar-col">
        <div id="bar" style="width: 100%;height:300px;"></div>
      </a-col>
      <a-col :span="12" id="main-col">
        <div id="main" style="width: 90%;height:300px;"></div>
      </a-col>
    </a-row>
    <br>
    <h1>数据概览</h1>
    <a-row>
      <a-col :span="24">
        <a-card>
          <a-row>
            <a-col :span="8">
              <a-statistic title="总阅读量" :value="statistic.viewCount">
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="8">
              <a-statistic title="总点赞量" :value="statistic.voteCount">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="8">
              <a-statistic title="点赞率" :value="statistic.voteCount / statistic.viewCount * 100"
                           :precision="2"
                           suffix="%"
                           :value-style="{ color: '#cf1322' }">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <br>
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic title="今日阅读" :value="statistic.todayViewCount" style="margin-right: 50px">
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic title="今日点赞" :value="statistic.todayVoteCount">
                <template #suffix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic
                  title="预计今日阅读"
                  :value="statistic.todayViewIncrease"
                  :value-style="{ color: '#0000ff' }"
              >
                <template #suffix>
                  <UserOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic
                  title="预计今日阅读增长"
                  :value="statistic.todayViewIncreaseRateAbs"
                  :precision="2"
                  suffix="%"
                  class="demo-class"
                  :value-style="statistic.todayViewIncreaseRate < 0 ? { color: '#3f8600' } : { color: '#cf1322' }"
              >
                <template #prefix>
                  <arrow-down-outlined v-if="statistic.todayViewIncreaseRate < 0"/>
                  <arrow-up-outlined v-if="statistic.todayViewIncreaseRate >= 0"/>
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <br>

  </div>
</template>

<script lang="ts">

import { defineComponent, ref, onMounted } from 'vue'
import axios from 'axios';

declare let echarts: any;
export default defineComponent({
  name: "the-welcome",
  setup(){
    const statistic = ref();
    statistic.value = {};
    const commentCount = ref();
    commentCount.value = {};
    const getStatistic = () => {
      axios.get('/ebook-snapshot/get-statistic').then((response) => {
        const data = response.data;
        if (data.success) {
          const statisticResp = data.content;
          console.log("快照返回值："+statisticResp)
          if (statisticResp.length > 1){
            statistic.value.viewCount = statisticResp[1].viewCount;
            statistic.value.voteCount = statisticResp[1].voteCount;
            statistic.value.todayViewCount = statisticResp[1].viewIncrease;
            statistic.value.todayVoteCount = statisticResp[1].voteIncrease;
          } else {
            statistic.value.viewCount = statisticResp[0].viewCount;
            statistic.value.voteCount = statisticResp[0].voteCount;
            statistic.value.todayViewCount = statisticResp[0].viewIncrease;
            statistic.value.todayVoteCount = statisticResp[0].voteIncrease;
          }


          // 按分钟计算当前时间点，占一天的百分比
          const now = new Date();
          const nowRate = (now.getHours() * 60 + now.getMinutes()) / (60 * 24);
          // console.log(nowRate)
          if (statistic.value.length > 1){
            statistic.value.todayViewIncrease = parseInt(String(statisticResp[1].viewIncrease / nowRate));
          } else {
            statistic.value.todayViewIncrease = parseInt(String(statisticResp[0].viewIncrease / nowRate));
          }

          // todayViewIncreaseRate：今日预计增长率
          statistic.value.todayViewIncreaseRate = (statistic.value.todayViewIncrease - statisticResp[0].viewIncrease) / statisticResp[0].viewIncrease * 100;
          statistic.value.todayViewIncreaseRateAbs = Math.abs(statistic.value.todayViewIncreaseRate);
        }
      });
    };

    const testEcharts = () => {
      const chartDom = document.getElementById('main1');
      if (chartDom) {
        chartDom.innerHTML = '<div id="main1" style="width: 90%;height:300px;"></div>';
      }
      const myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        color:['#00CCCC','#33CC99'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: statistic.value.voteCount, name: '总点赞量' },
              { value: statistic.value.viewCount, name: '总阅读数' },
            ]
          }
        ]
      };

      myChart.setOption(option);
    };

    const todayViewAndVoteEcharts = () => {
      const chartDom = document.getElementById('pie2');
      if (chartDom) {
        chartDom.innerHTML = '<div id="pie2" style="width: 90%;height:300px;"></div>';
      }
      const myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: statistic.value.todayViewCount, name: '今日阅读数' },
              { value: statistic.value.todayVoteCount, name: '今日点赞数' },

            ]
          }
        ]
      };

      myChart.setOption(option);
    };

    const commentEcharts = () => {
      const chartDom = document.getElementById('pie3');
      if (chartDom) {
        chartDom.innerHTML = '<div id="pie3" style="width: 90%;height:300px;"></div>';
      }
      const myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        color:['#99FFFF','#99FF66'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: commentCount.value.total, name: '总评论数' },
              { value: commentCount.value.today, name: '今日评论数' },
            ]
          }
        ]
      };

      myChart.setOption(option);
    };

    const init30DayEcharts = (list: any) => {
      // 发布生产后出现问题：切到别的页面，再切回首页，报表显示不出来
      // 解决方法：把原来的id=main的区域清空，重新初始化
      const mainDom = document.getElementById('main-col');
      if (mainDom) {
        mainDom.innerHTML = '<div id="main" style="width: 90%;height:300px;"></div>';
      }
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main'));

      const xAxis = [];
      const seriesView = [];
      const seriesVote = [];
      for (let i = 0; i < list.length; i++) {
        const record = list[i];
        xAxis.push(record.date);
        seriesView.push(record.viewIncrease);
        seriesVote.push(record.voteIncrease);
      }

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '本月趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总阅读量', '总点赞量']
        },
        grid: {
          left: '1%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总阅读量',
            type: 'line',
            // stack: '总量', 不堆叠
            data: seriesView,
            smooth: false
          },
          {
            name: '总点赞量',
            type: 'line',
            // stack: '总量', 不堆叠
            data: seriesVote,
            smooth: false
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    };

    const get30DayStatistic = () => {
      axios.get('/ebook-snapshot/get-30-statistic').then((response) => {
        const data = response.data;
        if (data.success) {
          const statisticList = data.content;
          init30DayEcharts(statisticList)
          init30DayEchartsBar(statisticList)
        }
      });
    };

    const init30DayEchartsBar = (list:any) =>{

      var chartDom = document.getElementById('bar');
      if (chartDom) {
        chartDom.innerHTML = '<div id="bar" style="width: 90%;height:300px;"></div>';
      }
      var myChart = echarts.init(chartDom);
      var option;
      const xAxis = [];
      const seriesView = [];
      const seriesVote = [];
      for (let i = 0; i < list.length; i++) {
        const record = list[i];
        xAxis.push(record.date);
        seriesView.push(record.viewIncrease);
        seriesVote.push(record.voteIncrease);
      }
      option = {
        title: {
          text: '本月数据'
        },
        legend: {data: ['总阅读量', '总点赞量']},
        tooltip: {},
        series: [
          {
            name: '总阅读量',
            type: 'bar',
            // stack: '总量', 不堆叠
            data: seriesView
          },
          {
            name: '总点赞量',
            type: 'bar',
            // stack: '总量', 不堆叠
            data: seriesVote
          }
        ],
        xAxis: {
              type: 'category',
              data: xAxis
        },
        yAxis: {
          type: 'value'
        }
      };

      option && myChart.setOption(option);
    };

    const getCommentCount = () => {
      axios.get('/comment/getCommentCount').then((response) => {
        const data = response.data;
        if (data.success) {
          commentCount.value.today = data.content.todayComment;
          commentCount.value.total = data.content.totalComment;
        }
      });
    }

    onMounted(() => {
      getStatistic();

      setTimeout(() => {
        testEcharts();
        todayViewAndVoteEcharts();
        commentEcharts();
      }, 100);

      get30DayStatistic();
      getCommentCount();
    });
    return{
      statistic,
      commentCount
    }
  }
});
</script>
